<template>
  <div class="yrfm-pie">
    <div class="pie-box">
      <div class="pie-item pie1">
        <div class="pie-item-wrap">
          <span class="line"></span>
          <div class="item-content">
            M
            <div class="score">{{ rfmParams.monetaryWeights.weights }}</div>
            <ul class="sub-score">
              <li v-for="item in rfmParams.monetaryWeights.param" :key="item.tagId">
                <span></span><br />{{ item.weights }}
              </li>
            </ul>
          </div>
          <div class="item-info">
            <div class="info-header">
              权重M
              <el-tooltip
                effect="dark"
                content="Monetary： 消费金额，顾客在固定时间内的平均消费贡献，M越大，表示客户对平台的财富贡献越大，越有价值。M最多可支持三个类目，分别为平均消费金额、平均存款金额、平均财富类产品余额"
                placement="top"
                popper-class="yrfm-tips"
              >
                <i class="el-icon-info"></i>
              </el-tooltip>
            </div>
            <ul>
              <li v-for="(item, index) in rfmParams.monetaryWeights.param" :key="item.tagId">
                <span class="dots" :class="'dot-' + (index + 1)"></span>
                {{ item.labName }}
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="pie-item pie2">
        <div class="pie-item-wrap">
          <div class="item-content">
            RF
            <div class="score">
              {{ rfmParams.recencyFrequencyWeights.tagId ? rfmParams.recencyFrequencyWeights.weights : 0 }}
            </div>
          </div>
          <div class="item-info">
            <div class="info-header">
              权重RF
              <el-tooltip
                effect="dark"
                content="Redeem Frequency： 赎回次数，客户在固定时间内的赎回次数，RF越小代表用户资金存储越稳定，用户越有价值"
                placement="top"
                popper-class="yrfm-tips"
              >
                <i class="el-icon-info"></i>
              </el-tooltip>
            </div>
            <ul>
              <li>{{ rfmParams.recencyFrequencyWeights.tagId ? rfmParams.recencyFrequencyWeights.labName : '无' }}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="pie-item pie3">
        <div class="pie-item-wrap">
          <div class="item-content">
            F
            <div class="score">{{ rfmParams.frequencyWeights.weights }}</div>
          </div>
          <div class="item-info">
            <div class="info-header">
              权重F
              <el-tooltip
                effect="dark"
                content="Frequency： 消费频率，客户在固定时间内的投资次数，F越大，表示客户交易越频繁，对企业越忠诚"
                placement="top"
                popper-class="yrfm-tips"
              >
                <i class="el-icon-info"></i>
              </el-tooltip>
            </div>
            <ul>
              <li>{{ rfmParams.frequencyWeights.labName }}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="pie-item pie4">
        <div class="pie-item-wrap">
          <div class="item-content">
            R
            <div class="score">{{ rfmParams.recencyWeights.weights }}</div>
          </div>
          <div class="item-info">
            <div class="info-header">
              权重R
              <el-tooltip
                effect="dark"
                content="Recency： 近一次消费时间，客户最近一次消费时间与当前时间的间隔，R越小，表示客户越活跃，对企业越忠诚"
                placement="top"
                popper-class="yrfm-tips"
              >
                <i class="el-icon-info"></i>
              </el-tooltip>
            </div>
            <ul>
              <li>{{ rfmParams.recencyWeights.labName }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    rfmAnalysisParam: {
      type: String,
      default: ''
    }
  },
  computed: {
    rfmParams() {
      return JSON.parse(this.rfmAnalysisParam)
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss">
.yrfm-pie {
  $yfrm-blue: #3ab2d0;
  $yfrm-green: #45bf7b;
  $yfrm-orange: #f9ab0b;
  $yfrm-red: #fd7037;
  padding: 50px;
  border: 1px solid #ddd;
  .pie-box {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    position: relative;
  }
  .pie-item {
    width: 0;
    height: 0;
    border-radius: 50%;
    transform: rotate(-45deg);
    position: absolute;
  }
  .pie1 {
    border-top: 150px solid $yfrm-blue;
    border-right: 150px solid transparent;
    border-bottom: 150px solid transparent;
    border-left: 150px solid transparent;
    top: -1px;
    left: -1px;
    .pie-item-wrap {
      top: -150px;
      left: -50px;
    }
    .item-info {
      background-color: #f5f9f9;
      top: -50px;
      left: -450px;
      .info-header {
        color: $yfrm-blue;
      }
      li {
        position: relative;
      }
    }
    .dots {
      display: inline-block;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 12px;
      left: -17.5px;
    }
    .dot-1 {
      background-color: $yfrm-green;
    }
    .dot-2 {
      background-color: $yfrm-orange;
    }
    .dot-3 {
      background-color: $yfrm-red;
    }
    &:before,
    &:after {
      width: 100px;
      height: 1px;
      content: '';
      background-color: $yfrm-blue;
      position: absolute;
    }
    &:before {
      top: -280px;
      left: -140px;
      transform: rotate(45deg);
    }
    &:after {
      top: -195px;
      left: -105px;
      transform: rotate(90deg);
    }
  }
  .pie2 {
    border-top: 150px solid transparent;
    border-right: 150px solid $yfrm-green;
    border-bottom: 150px solid transparent;
    border-left: 150px solid transparent;
    top: -1px;
    left: 1px;
    .pie-item-wrap {
      top: -50px;
      right: -150px;
    }
    .item-info {
      background-color: #f5f9f9;
      top: -20px;
      right: -450px;
      .info-header {
        color: $yfrm-green;
      }
    }
    &:before,
    &:after {
      width: 100px;
      height: 1px;
      content: '';
      background-color: $yfrm-green;
      position: absolute;
    }
    &:before {
      top: 95px;
      right: -320px;
      transform: rotate(45deg);
    }
    &:after {
      width: 95px;
      top: 60px;
      right: -235px;
    }
  }
  .pie3 {
    border-top: 150px solid transparent;
    border-right: 150px solid transparent;
    border-bottom: 150px solid $yfrm-orange;
    border-left: 150px solid transparent;
    bottom: -1px;
    right: -1px;
    .pie-item-wrap {
      bottom: -150px;
      right: -50px;
    }
    .item-content {
      margin-top: 10px;
    }
    .item-info {
      background-color: #fbf6f4;
      bottom: -50px;
      right: -450px;
      .info-header {
        color: $yfrm-orange;
      }
    }
    &:before,
    &:after {
      width: 100px;
      height: 1px;
      content: '';
      background-color: $yfrm-orange;
      position: absolute;
    }
    &:before {
      top: 285px;
      right: -135px;
      transform: rotate(45deg);
    }
    &:after {
      width: 100px;
      top: 200px;
      right: -91px;
      transform: rotate(-100deg);
    }
  }
  .pie4 {
    border-top: 150px solid transparent;
    border-right: 150px solid transparent;
    border-bottom: 150px solid transparent;
    border-left: 150px solid $yfrm-red;
    bottom: -1px;
    left: -1px;
    .pie-item-wrap {
      bottom: -50px;
      left: -150px;
    }
    .item-content {
      margin-top: 10px;
    }
    .item-info {
      background-color: #fbf6f4;
      bottom: -50px;
      left: -450px;
      .info-header {
        color: $yfrm-red;
      }
    }
    &:before,
    &:after {
      width: 100px;
      height: 1px;
      content: '';
      background-color: $yfrm-red;
      position: absolute;
    }
    &:before {
      top: -80px;
      right: 240px;
      transform: rotate(45deg);
    }
    &:after {
      width: 105px;
      top: -31px;
      right: 151px;
      transform: rotate(15deg);
    }
  }
  .pie-item-wrap {
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    position: absolute;
  }
  .item-content {
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-top: 30px;
    .score {
      font-size: 16px;
      margin: 5px 0 8px;
    }
  }
  .sub-score {
    font-size: 13px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    span {
      display: inline-block;
      width: 12px;
      height: 12px;
      border: 2px solid #fff;
      background-color: $yfrm-green;
    }
    li:nth-child(2) span {
      background-color: $yfrm-orange;
    }
    li:last-child span {
      background-color: $yfrm-red;
    }
  }
  .item-info {
    width: 250px;
    padding: 10px 20px 10px 25px;
    position: absolute;
    .info-header {
      font-size: 18px;
      font-weight: bold;
      padding: 5px 0;
      vertical-align: middle;
      i {
        font-size: 16px;
        color: #606266;
      }
    }
    li {
      font-size: 15px;
      padding: 5px 0;
      line-height: 25px;
    }
  }
}
</style>
